<template>
  <div class="jingyanzhi"  :style='{ height: screenH + "px" }'>
    <ul>
      <li @click="jingyanzhi"></li>
      <li @click="huoqu"></li>
    </ul>
    <div class="mingxi" v-show="mingxi">
      <div class="contents">
        <ul class="ulhead">
          <li>
            <div>日期</div>
            <div>积分</div>
            <div>内容</div>
          </li>
        </ul>
        <ul class="ulmain" :style='{ height: 0.78 * screenH + "px" }'>
          <li v-for="item in page">
            <div>{{ item.GET_DATE }}</div>
            <div>{{ item.OCCUR_NUM | judgeNum }}</div>
            <div>{{ item.REMARK }}</div>
          </li>
        </ul>
      </div>
    </div>
    <div class="explian" v-show="explian">
      <div class="main">
        <table class="content">
          <thead>
          <tr>
            <td>获取经验值内容</td>
            <td>单次获取经验值</td>
            <td>说明</td>
          </tr>
          </thead>
          <tbody>
          <tr v-for="item in contents">
            <td style="height:51px"> {{ item.content }} </td>
            <td> {{ item.value }} </td>
            <td> {{ item.explian }} </td>
          </tr>
          </tbody>
        </table>
        <div class="space"></div>
      </div>
    </div>
  </div>
</template>

<script>
  import RemoteDAO from 'common/RemoteDAO'
  import SessionDAO from 'common/sessionDAO'
  export default {
    data () {
      return {
        screenH: 0,
        screenW: 0,
        height: 0, // 页面的实际高度
        explian: false, // 经验获取说明页面显示与否
        mingxi: true, // 经验值明细页面显示与否
        number: undefined,
        userCode: SessionDAO.getUserCode(),
        page: [],
        contents: [
          {
            content: '每日签到',
            value: 5,
            explian: '选手每天登陆活动页面自动获得经验值。'
          },
          {
            content: '分享',
            value: 10,
            explian: '每天每个用户分享大赛页面，并且分享的链接被点击，计一次经验值。'
          },
          {
            content: '调仓',
            value: 15,
            explian: '交易日每位用户成功调仓获得经验值，调仓不成功不获得。'
          },
          {
            content: 'K线对决',
            value: 10,
            explian: '交易日参加K线对决的用户获得10经验值，仅记录第一次参加。'
          },
          {
            content: '投教课程',
            value: 20,
            explian: '每周更新2次投教课程，仅记录首次观看。'
          },
          {
            content: '大咖直播',
            value: 20,
            explian: '每周三进行大咖直播，仅记录首次观看。'
          },
          {
            content: '名师点评',
            value: 20,
            explian: '每周一进行名师点评，仅记录首次观看。'
          },
          {
            content: '观点PK',
            value: 20,
            explian: '每周六发布观点，选手选择一方观点后获得经验值。'
          }
        ]
      }
    },
    filters: {
      judgeNum (str) {
        let num = Number(str)
        if (!isNaN(num) && num !== null) {
          num = num >= 0 ? '+' + num : num
          return num
        } else {
          return str
        }
      }
    },
    mounted () {
      this.setHeight()
      this.initUI()
      this.init()
    },
    methods: {
      init () {
        let params = {
          userCode: this.userCode
        }
        this.getData(params)
      },
      initUI () {
        window.onresize = this.setHeight
      },
      setHeight () {
        this.height = document.getElementsByClassName('explian')[0].offsetHeight
        if (this.height < window.innerHeight) {
          this.screenH = window.innerHeight
          this.screenW = window.innerWidth
        } else {
          this.screenH = this.height
        }
      },
      getData (params) {
        RemoteDAO.callUC12000306(params).then(resp => {
          this.page = resp.data.body
        }, error => {
          this.$store.dispatch('setTip', {text: error.message})
        })
      },
      jingyanzhi () {
        this.explian = false
        this.mingxi = true
      },
      huoqu () {
        this.explian = true
        this.mingxi = false
      }
    }
  }
</script>

<style scoped>
  .jingyanzhi{
    background-image: url("~assets/images/pkbg.jpg");
    background-repeat: repeat-y;
  }
  .explian{
    background-image: url("~assets/images/huoqu.png");
    background-repeat: no-repeat;
    padding: 200px 52px 0 55px;
    background-size:100%;
  }
  .content thead{
    background: #FAE794;
    text-align: center;
    font-size:20px;
  }
  .content thead td{
    padding:5px 0;
  }
  .content tbody{
    font-size:20px;
    text-align: center;
    background: #FbF9F6;
    color:#44331b;
  }
  .content td{
    border:1px solid #5E1907;
  }
  .content td:nth-of-type(1){
    width:153px;
  }
  .content td:nth-of-type(2){
    width:153px;
  }
  .content tbody td:nth-of-type(3){
    width:232px;
    text-align: left;
    padding: 0 10px;
  }
  .jingyanzhi>ul{
    position: absolute;
    top:26px;
    left:104px;
    width:450px;
    z-index: 999;
  }
  .jingyanzhi>ul li{
    display: inline-block;
    width:209px;
    height: 84px;
  }
  .mingxi{
    background-image: url("~assets/images/mingxi.png");
    background-repeat: no-repeat;
    padding: 200px 52px 0 55px;
    background-size:100%;
    font-size: 20px;
  }
  .mingxi{
    font-size:20px;
  }
  .contents{
    font-size:20px;
    text-align: center;
    width:537px;
  }
  .contents div{
    display: inline-block;
    text-align: center;
  }
  .contents .ulmain{
    overflow-y:scroll;
  }
  .contents .ulhead {
    background: #DFD7C6;
    box-shadow: 0px 7px 4px rgba(150,150,150,.5);
  }
  .contents .ulmain li{
    border-bottom: 1px dashed #666;
    height:60px;
    line-height: 60px;
    font-size:20px;
  }
  .contents  li div:nth-of-type(1){
    width: 30%;
  }
  .contents  li div:nth-of-type(2){
    width: 20%;
  }
  .contents  li div:nth-of-type(3){
    width: 47%;
  }
  .space{
    height:40px;
    width:100%;
  }
/*  .contents td:nth-of-type(1){
    width: ;
  }*/
</style>
